﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Light Dark Mode</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<!--Dark Mode Switch-->
<div class="theme-switch-wrapper">
    <span id="toggle-icon">
        <span class="toggle-text">
            Light Mode
        </span>
        <i class="fas fa-sun"></i>
    </span>
    <label class="theme-switch">
        <input type="checkbox" />
        <div class="slider round">

        </div>
    </label>
</div>

<!--navigation-->
<nav id="nav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
</nav>


<!--Home Section-->
<section id="home">
    <div class="title-group">
        <h1>Custom Title Here</h1>
        <h2>Welcome to the Website</h2>
    </div>
</section>

<!--About Section-->
<section id="about">
    <div class="title-group">
        <h1>Undraw Illustrations</h1>
        <div class="about-container">
            <div class="image-container">
                <h2>Web Innovation</h2>

            </div>
            <div class="image-container">
                <h2>Problem Solving</h2>

            </div>
            <div class="image-container">
                <h2>High Concept</h2>

            </div>
        </div>
    </div>
</section>

<!--Projects Section-->
<section id="projects">
    <div class="title-group">
        <h1>Buttons</h1>
        <div class="buttons">
            <button class="primary">Primary</button>
            <button class="secondary">Secondary</button>
            <button class="primary" disabled>Disabled</button>
            <button class="outline">Outline</button>
            <button class="secondary outline">Alt Outline</button>
            <button class="outline" disabled>Disabled</button>
        </div>
        <div class="text-box" id="text-box">
            <p>lorem what is your name ?where are you from? what do you do ?</p>
        </div>
    </div>
</section>


<!--Contact Section-->
<section id="contact">
    <div class="social-icons">
        <i class="fab fa-github"></i>
        <i class="fab fa-codepen"></i>
        <i class="fab fa-linkedin-in"></i>
        <i class="fab fa-medium"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-youtube"></i>
    </div>
</section>

<script src="script.js"></script>
</body>
</html>